<template>
  <el-dialog :visible.sync="dialogVisible"  v-loading="showLoading" @open="handleDialogOpen()">
    <div slot="title" class="dialog-header"><h3>创建私聊</h3></div>
    <el-form size="small">
      <el-form-item>
        <el-col :span="24">
         <users-select :is-single-user="true"  :visible="dialogVisible" @cancel="doCloseDialog()" @confirm="afterUsersSelectConfirm"></users-select>
        </el-col>
      </el-form-item>
    </el-form> 
  </el-dialog>
</template>

<script>

import { listUser } from '@/api/user'
import { createChannel } from '@/api/channel'
import UsersSelect from '../../sys/user/UsersSelect.vue'; 
import { mapGetters } from 'vuex' 

export default {
  name: "create-private-channel",
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  data() {
    return {
      showLoading: false,
      dialogVisible: false,  
      searchParams: {
        username: '',
        limit: 20,
        offset: 0
      },
      pagingUserList: {
        total: 0,
        rows: []
      },
      selectedIndex: -1,
      selectedUser: null
    }
  },
  methods: {
    doCloseDialog() {
      Object.assign(this.$data, this.$options.data())
      this.dialogVisible = false  
    },
    handleDialogOpen() {
       
    },
    doSearchUser() {
      this.showLoading = true
      listUser(this.searchParams.username, this.searchParams.limit, this.searchParams.offset)
      .then(response => {
        this.pagingUserList = response.data
        this.showLoading = false
      })
      .catch(error => {
        this.showLoading = false
        //outputError(this, error)
      })
    },
    selectUser(user, index) {
      this.selectedIndex = index
      this.selectedUser = user
    },
    afterUsersSelectConfirm(users){
       this.selectedUser=users[0];
       this.doSaveChannel();
    },
    doSaveChannel() {
      if(this.selectedUser == null) {
        this.$message({
          showClose: true,
          message: '请选择私聊对象',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.showLoading = true
      let currentUser = this.userInfo;
      var groupUserids=[currentUser.userid,this.selectedUser.userid];
      groupUserids=groupUserids.sort();
      let channel = {
        msgType: 'prichat',
        groupId:groupUserids.join("_"),
        groupName:"与"+ this.selectedUser.username+"的聊天",
        isPrichat:'1',
        sendUserid: currentUser.userid,
        sendUsername: currentUser.username, 
        toUserid: this.selectedUser.userid,
        toUsername: this.selectedUser.username, 
      } 
        this.$emit('onChannelCreated', channel)
        this.showLoading = false
        //Object.assign(this.$data, this.$options.data())
        this.dialogVisible = false 
    } 
  },
  mounted: function() {
    this.$nextTick(() => {  
      this.$on('openDialog', function(action) { 
        this.dialogVisible = true
      })
    })      
  },
  components:{
    'users-select': UsersSelect,  
  }
}
</script>

<style lang="scss" scoped>
.search-input-container {
  float: left;
  margin: 0 10px 0 16px;
  .el-input {
    width: 230px;
  }  
}
.search-button-container {
  margin-left: 235px;
}

.user-list-container {
  border: solid 1px #EFEEEC;
  height: 330px;
  overflow-y: auto;
  .user-container {
    border-bottom: solid 1px #EFEEEC;
    padding: 5px;
    cursor: pointer;
    clear: both;
    .avatar {
      width: 40px; 
      height: 40px;
      margin: 4px 5px 0 5px;
      line-height: 40px;
      background-color: #DF016E;
      border-radius: 100px;
      text-align: center;
      color: #fff;
      font-weight: bold;
      float: left;
    }
    .username {
      color: #111111;
    }
    .nickname {
      color: #827F7A;
    }
  }
  .user-container:hover {
    background-color: #F1EFEE;
  }
  .selected-user {
    background: #F0F8FF;
  }
  .selected-user:hover {
    background-color: #F0F8FF;
  }
}
</style>